<template>
	<view class="main">
		<view class="list">
			<view class="border a">
				<view class="left">
					昵称
				</view>
				<view class="right">
					<input v-model="nickname" type="text" value="" placeholder="请输入昵称" />
				</view>
			</view>
			<view class="border a">
				<view class="left">
					密码
				</view>
				<view class="right">
					<input v-model="password" type="password" value="" placeholder="请输入密码" />
				</view>
			</view>
		</view>
		<view class="btn" @tap="confirm">
			确认创建
		</view>
	</view>
</template>

<script>
	import {
		user,
		makeSon
	} from '@/api/index.js'
	export default{
		data(){
			return{
				info:{},
				username:'',
				nickname:'',
				password:'',
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			async confirm(){
				if(this.nickname.length == 0){
					uni.showToast({
						title:'请输入昵称',
						icon:'none'
					})
					return
				}
				if(this.password.length == 0){
					uni.showToast({
						title:'请输入密码',
						icon:'none'
					})
					return
				}
				if(this.password.length < 6){
					uni.showToast({
						title:'密码不能少于六位数',
						icon:'none'
					})
					return
				}
				let res = await makeSon({
					username:this.username,
					nickname:this.nickname,
					password:this.password
				})
				console.log(res)
				if(res.code == 1){
					uni.showToast({
						title:'创建成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			async getInfo(){
				let res = await user()
				console.log(res)
				this.info = res.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		padding: 100rpx 30rpx;
		.list{
			.border{
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #000;
				margin-bottom: 30rpx;
			}
			.a{
				display: flex;
				align-items: center;
				.left{
					width: 25%;
					font-size: 24rpx;
				}
				.right{
					flex: 1;
					font-size: 24rpx;
				}
			}
			.b{
				display: flex;
				align-items: center;
				.left{
					width: 25%;
					font-size: 24rpx;
				}
				.right{
					width: 75%;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					input{
						flex: 1;
					}
					.btn{
						padding: 16rpx 20rpx;
						font-size: 24rpx;
						background-color: #EA504F;
						border-radius: 200rpx;
					}
				}
			}
			.c{
				.left{
					font-size: 28rpx;
					margin-bottom: 40rpx;
				}
				.idList{
					.idItem{
						padding: 16rpx 26rpx;
						border: 2rpx solid #fff;
						border-radius: 14rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						text{
							color: #999999;
							font-size: 24rpx;
						}
						.radio{
							display: flex;
							align-items: center;
							image{
								width: 34rpx;
								height: 34rpx;
							}
						}
					}
				}
			}
		}
		.btn{
			width: 100%;
			padding: 30rpx;
			text-align: center;
			color: #fff;
			background-color: #EA504F;
			border-radius: 10rpx;
		}
	}
</style>